<template>
    <div class="wrapper">
      <!-- header部分 -->
            <header> 
                <p>用户登录</p>
            </header>

            <ul class="user-info">
                <li>
                    <p class="title" >手机号码：</p>
                    <input v-model="userId" id="username" class="lineedit" placeholder="请输入用户名">
                </li>
                <li>
                    <p class="title" >密码：</p>
                    <input v-model="password" id="password" class="lineedit" placeholder="请输入密码">
                </li>
            </ul>

            <div class="check-box">
                <input type="checkbox" id="check-box" value="none">
                <p>我已充分阅读并理解</p>
                <a href="/js/啥都木有.html" >《额乐嘛剥削用户条约》</a>
            </div>
            
            <ul class="log-reg">
                <li  >
                    <button style="background-color: aquamarine;" @click="login" >
                        登录
                    </button>
                </li>
                <li>
                    <button onclick="location.href='register'">
                        注册
                    </button>
                </li>
            </ul>
            
            <Footer></Footer>
</div>  
</template>

<script>
    import Footer from '../components/Footer.vue';
    export default{
        name:'Login',
        data(){
            return {
                userId:'',
                password:''
            }
        },
        methods:{
            login(){
                if(this.userId=='')
                {
                    alert("用户名不能为空");          //原本这里是手机号码，就id算了
                    return;
                }
                if(this.password=='')
                {
                    alert("密码不可为空");
                    return;
                }

                //登录请求b
                this.$axios.post('UserController/getUserByIdByPass ',this.$qs.stringify({
                    userId:this.userId,
                    password:this.password
                })).then(response=>{
                    let user =response.data;
                    if(user==null)        //用户名密码不对
                    {
                        alert("用户名或密码不正确！");
                        return;
                    }
                    else{               //登录成功
                        user.userImg='';            //setsstorage容量不够放下userimg，直接不拿
                        this.$setSessionStorage('user',user);
                        this.$router.go(-1);          //返回上一页面
                    }
                }).catch(error=>{
                    console.error(error);
                });
            }
        }
    }
</script>

<style scoped>
    .wrapper{
    width: 100%;
    height: 100%;
}

.wrapper header{
    width: 100%;
    height: 13vw;
    background-color: #51b9fe;
    justify-content: center;
    display: flex;
    align-items: center;

    font-size: 4.5vw;
    color: #fff;
}

.wrapper .user-info{
    width: 100%;
    height: 33vw;
    justify-content: center;
    margin-top: 5vw;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.wrapper .user-info li{
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    margin-left: 3vw;
    font-size: 3vw;
    align-items: center;
}

.wrapper .user-info li .check-box{
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:row;
    
}

.wrapper .user-info li .title{
    flex: 0 0 18vw;
    font-size: 3vw;
}

.wrapper .user-info li .lineedit{
    border: 0px;
    border-bottom: solid 1px rgb(114, 86, 86);
    font-size: 3vw;
}

.wrapper .check-box{
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:row;
    margin-left: 3vw;
    font-size: 3vw;
}

.wrapper .check-box input{
    width: 3vw;
    height: 3vw;
    margin-right: 3vw;
}

.wrapper .log-reg{
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:column;
}

.wrapper .log-reg li{
    margin-top: 6vw;
}

.wrapper .log-reg li button{
    width: 70vw;
    height: 8vw;
    border-radius: 3vw;
    border: none;
    font-size: 3vw;
}

</style>